<script setup lang="ts">
import { ref, onMounted, watch, onUpdated } from 'vue'
import CategorySelector from '@/components/CategorySelect.vue'
import * as echarts from 'echarts'

interface TableDataItem {
  name: string
  courseViews: number
  coursePurchases: number
  listeners: number
  institutions: number
}

const tableData: TableDataItem[] = [
  {
    name: '总量',
    courseViews: 1000,
    coursePurchases: 500,
    listeners: 800,
    institutions: 100
  },
  {
    name: '昨日',
    courseViews: 900,
    coursePurchases: 450,
    listeners: 750,
    institutions: 90
  }
]

const chart = ref<HTMLDivElement | null>(null)

// 随机数组
const dataArray = ref<number[]>()




onMounted(() => {
  if (chart.value) {
    // 获取图表数据
    const myChart = echarts.init(chart.value)
    // 指定图表的配置项和数据
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: dataArray.value,
          type: 'line',
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255, 0, 0, 0.5)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(255, 0, 0, 0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
})

// 监听事件
onUpdated(() => {
  watch(dataArray, () => {
    if (chart.value) {
      // 获取图表数据
      const myChart = echarts.init(chart.value)
      // 指定图表的配置项和数据
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu',]
        },
        series: [
        {
          data: dataArray.value,
          type: 'line',
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255, 0, 0, 0.5)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(255, 0, 0, 0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      ]
      }
      myChart.setOption(option)
    }
  })
})
</script>


<template>
  <div class="home">
    <div v-show="false">{{ dataArray }}</div>
    <el-row :gutter="20">
      <!-- 第一行，分为左右两列 -->
      <el-col :span="12">
        <el-row :gutter="20">
          <!-- 左侧三个子容器 -->
          <el-col :span="8">
            <div class="sub-column">
              <img src="@/assets/1.png" alt="Profile Picture" class="profile-picture" />
              <p class="highlight-text">1234</p>
              <p class="small-text">今日访问量</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="sub-column">
              <img src="@/assets/2.png" alt="Profile Picture" class="profile-picture" />
              <p class="highlight-text">0</p>
              <p class="small-text">课程购买量</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="sub-column">
              <img src="@/assets/3.png" alt="Profile Picture" class="profile-picture" />
              <p class="highlight-text">9999</p>
              <p class="small-text">课程访问量</p>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <!-- 右侧一个子容器 -->
        <div class="sub-column">
          <el-table :data="tableData" style="width: 100%" :border="false">
            <el-table-column prop="name" width="80"></el-table-column>
            <el-table-column prop="courseViews" label="课程访问量" width="120"></el-table-column>
            <el-table-column prop="coursePurchases" label="课程购买量" width="120"></el-table-column>
            <el-table-column prop="listeners" label="听课人数" width="120"></el-table-column>
            <el-table-column prop="institutions" label="机构数" width="120"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <!-- 第二行，预留图表位置 -->
      <el-col :span="24">
        <div class="chart-container">
          <!-- 图表位置 -->
          <CategorySelector v-model="dataArray!"></CategorySelector>
          <div ref="chart" style="width: 100%; height: 600px;"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<style scoped lang="less">
.home {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .el-row {
    margin-bottom: 10px;

    .sub-column, .chart-container {
      height: 100%;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      padding: 20px;
      box-sizing: border-box;
    }

    .sub-column {
      height: 180px; // 根据需要调整高度
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .profile-picture {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
      }

      .highlight-text {
        color: blue;
        font-weight: bold;
        margin: 10px 0;
      }

      .small-text {
        color: gray;
        font-size: 12px;
      }
    }

    .chart-container {
      height: 600px; // 根据需要调整高度
    }
  }
}
</style>